<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>要你的命</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="./index.css"/>
	</head>
	<body>
		<div id="app">
			<div class="set_col">
				<div>
					<div class="show_r"></div>
					<input type="text"  maxlength="3" v-model='colors[0].r'>
				</div>
				<div>
					<div class="show_g" ></div>
					<input type="text" maxlength="3" v-model='colors[0].g'>
				</div>
				
				<div>
					<div class="show_b" ></div>
					<input type="text"  maxlength="3" v-model='colors[0].b'>
				</div>
				<div v-for="item in colors" class="result" :style="'background-color:rgba('+item.r+','+item.g+','+item.b+','+0.9+')'"></div>
				<div class="clear" @click="clear">{{dose}}</div>
			</div>
			<div class="outer" @mousedown="begin" @mouseup="ends">
				<div class="son" v-for="items in son" @mousemove="Draw" @click="point"></div>
			</div>
		</div>
		<script type="text/javascript">
			window.onload = function(){
				let vue = new Vue({
					el:"#app",
					data:{
						son:new Array(3600),
						isdraw:true,
						dose:"橡皮",
						red:150,
						green:150,
						blue:150,
						colors:[
							{
								r:240,
								g:180,
								b:200
							}
						]
					},
					methods:{
						changeCol(col,did){
							if(this.colors[0][col]<245&&did==1){
								this.colors[0][col]+=10
							}else if(this.colors[0][col]>10&&did!=1){
								this.colors[0][col]-=10
							}
							console.log(this.colors[0].r,this.colors[0].g,this.colors[0].b)
						},
						// 绘制
						Draw(e){
							if(this.flag){
								e.target.style.backgroundColor="rgba("+this.colors[0].r+","+this.colors[0].g+","+this.colors[0].b+")"
								if(this.isdraw){
									e.target.style.border="none"
								}else{
									e.target.style.borderTop="1px solid #faa"
									e.target.style.borderLeft="1px solid #faa"
								}
							}
						},
						point(e){
							e.target.style.backgroundColor="rgba("+this.colors[0].r+","+this.colors[0].g+","+this.colors[0].b+")"
							if(this.isdraw){
								e.target.style.border="none"
							}else{
								e.target.style.borderTop="1px solid #faa"
								e.target.style.borderLeft="1px solid #faa"
							}
						},
						
						// 画笔与橡皮之间的切换
						begin(){
							this.flag = true
						},
						ends(){
							console.log('结束了')
							this.flag = false
						},
						clear(){
							this.isdraw = !this.isdraw
							if(this.isdraw){
								this.dose="橡皮"
							}else{
								this.dose="画笔"
							}
							this.colors[0].r = "80"
							this.colors[0].g = "80"
							this.colors[0].b = "144"
						},
					}
			})
		}
		</script>
	</body>
</html>
